{# empty Twig template #}
{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('bootstrap/css/bootstrap-datetimepicker.min.css') }}">
    <link rel="stylesheet" href="{{ asset('bootstrap/css/smoothness/jquery-ui-1.10.3.custom.min.css') }}" />
{% endblock %}
    
{% block body %}

    <div id="tablaFaltas">
        <table id="table" class="table table-nomargin table-bordered dataTable table-striped table-hover">
            <thead>
                <tr>
                    <th style="text-align: center;">Día de recuperación</th>   
                    <th style="text-align: center;">Fecha y hora</th>
                    <th style="text-align: center;">Código de clase</th>
                    <th style="text-align: center;">Lo tomó de</th>  
                    <th style="text-align: center;">Devolver día</th>  
                </tr>
            </thead>
            <tbody>
            {% for avisoRecupera in avisosRecuperaciones %}            
               <tr>
                   <td style="text-align: center;">{{ avisoRecupera.dia }}</td>
                   <td style="text-align: center;">{{ avisoRecupera.fechaFalta }}</td>
                   <td style="text-align: center;">{{ avisoRecupera.clase }}</td>
                   <td style="text-align: center;">
                    {% if avisoRecupera.alumno is not empty %}
                        {{ avisoRecupera.alumno.nombreCompleto }}
                    {% else %}
                          - 
                    {% endif %}
                    </td>
                   <td style="text-align: center;">
                        <div class="btn-link" id="disableDay-{{ avisoRecupera.id }}">
                            <i class="icon-undo"></i> Devolver
                        </div>
                   </td>
               </tr>
           {% endfor %}
           </tbody>
        </table>
    </div>
            
    <div id="msgFaltaAlumno"></div>
{% endblock %}
    <div  id="dialog-confirm" title="Asignar falta a la fecha:">
        <p class="hidden" id="dialog-body"></p>
    </div>


{% block javascripts %}
<!-- Theme scripts -->
<script src="{{ asset('bootstrap/js/jquery-1.9.1.js') }}"></script>   
<script src="{{ asset('bootstrap/js/jquery-ui-1.10.3.custom.min.js') }}"></script>
<script src="{{ asset('bootstrap/js/bootstrap-datetimepicker.min.js') }}"></script>
    <script type="text/javascript">
        $(document).ready(function(){  
            
            function deleteDay(data, Row){                
                $('#dialog-body').replaceWith('<span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>Devolver día de falta al Alumno. ¿Está seguro de seguir?');
                $( "#dialog-confirm" ).dialog({
                    resizable: false,
                    height:200,
                    modal: true,
                    buttons: {
                        "Devolver Día": function() {
                            $.post(data); 
                            Row.remove(); // remove row                       
                            $( this ).dialog( "close" );
                            return false; // prevents default behavior 
                        },
                        Cancelar: function() {
                           $( this ).dialog( "close" );
                        }
                    }
                });
            };
            
            {% for avisoRecupera in avisosRecuperaciones %} 
                    $('#disableDay-{{ avisoRecupera.id }}').click(function(){
                        var Row= $(this).closest("tr");
                        {% if avisoRecupera.alumno is not empty %}
                            deleteDay("{{ path('avisos_recupera_disabled', {'id': avisoRecupera.id}) }}", Row);
                        {% else %}
                            deleteDay("{{ path('avisos_falta_delete', {'id': avisoRecupera.id}) }}", Row);
                        {% endif %}
                    });
            {% endfor %}
                      
        });
    </script>
{% endblock %}